<template>
	<u-overlay :show="show">
		<view class="warp">
			<view class="warp__content">
				<view class="warp__content__top">
					{{content}}
				</view>
				<view class="warp__content__bottom" @click="()=>{$emit('confirm')}">
					{{confirmBtn}}
				</view>
			</view>
			<view class="warp__cancel" @click="()=>{$emit('cancel')}">
				{{cancelBtn}}
			</view>
		</view>

	</u-overlay>
</template>

<script>
	export default {
		name: "CustomPopover",
		props: {
			show: {
				type: Boolean,
				default: () => false
			},
			cancelBtn: {
				type: String,
				default: function() {
					return this.$t('index.Discard')
				}
			},
			confirmBtn: {
				type: String,
				default: function() {
					return this.$t('index.Save')
				}
			},
			content: {
				type: String,
				default: function() {
					return this.$t('index.Save-changes')
				}
			},
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.warp {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: end;
		height: 100%;

		&__content,
		&__cancel {
			background: #FFFFFF;
			border-radius: 20rpx;
		}

		&__content {
			width: 690rpx;
			height: 208rpx;
			margin-bottom: 20rpx;

			&__top {
				text-align: center;
				line-height: 100rpx;
				height: 100rpx;
				margin: 0 20rpx;
				font-size: 28rpx;
				font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
				font-weight: 400;
				color: #878787;
				box-shadow: inset 0rpx -2rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
			}

			&__bottom {
				text-align: center;
				line-height: 108rpx;
				height: 108rpx;
				font-size: 32rpx;
				font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
				font-weight: 400;
				color: #FE6600;
			}
		}

		&__cancel {
			text-align: center;
			width: 690rpx;
			height: 108rpx;
			line-height: 108rpx;
			font-size: 32rpx;
			font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
			font-weight: 400;
			color: #61BDB2;
			margin-bottom: 40rpx;
		}
	}
</style>